<template>

  <!--  试图-->
  <div>


<!--    查看天气-->
    <el-dialog :title="cityName" :visible.sync="dialogFormVisibleWeather" width="400px">
      <el-card class="weather-card">
        <div class="weather-info">
<!--          <img :src="weatherIcon" alt="Weather Icon" class="weather-icon" />-->
          <div class="weather-details">
            <h3>{{ temperature }} °C</h3>
            <p>湿度: {{ humidity }}%</p>
            <p>天气: {{ weatherCondition }}</p>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleWeather = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原料厂商负责人" prop="materialName" :label-width="formLabelWidth">
          <el-input v-model="form.materialName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="加工状态" prop="status" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择加工状态">
            <!-- 根据实际业务需求添加加工状态选项 -->
            <el-option label="待完成" value="待完成"></el-option>
            <el-option label="已加工" value="已加工"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库状态" :label-width="formLabelWidth">
          <el-select v-model="form.libraryStatus" placeholder="请选择库状态">
            <!-- 根据实际业务需求添加库状态选项 -->
            <el-option label="已出库" value="已出库"></el-option>
            <el-option label="未出库" value="未出库"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="加工地址" :label-width="formLabelWidth">
          <el-cascader
              v-model="value"
              :options="options"
              :props="props"
              @change="handleChange">
          </el-cascader>

        </el-form-item>

        <el-form-item label="负责人姓名"  :label-width="formLabelWidth">
          <el-input v-model="form.responsibilityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话"  :label-width="formLabelWidth">
          <el-input v-model="form.responsibilityPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="加工日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="创建人" prop="establishName" :label-width="formLabelWidth">
          <el-input v-model="form.establishName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker disabled v-model="form.establishTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMachining">确 定</el-button>
      </div>
    </el-dialog>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="状态查询">
        <el-select clearable v-model="formInline.status" placeholder="状态查询">
          <el-option label="待完成" value="待完成"></el-option>
          <el-option label="已加工" value="已加工"></el-option>
          <el-option label="进行中" value="进行中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="农作物编号">
        <el-input clearable v-model="formInline.argpId" placeholder="农作物编号"></el-input>
      </el-form-item>
<!--      <el-form-item label="时间区间查询">-->
<!--        <el-date-picker-->
<!--            v-model="value"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            end-placeholder="结束日期"-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button type="warning" @click="machiningList">查询</el-button>
        <el-button type="success" @click="openAdd(0)">添加</el-button>
        <el-button type="success" icon="el-icon-download" plain @click="excelPort">导出Excel</el-button>
        <el-upload
            action="http://192.168.137.44:8888/system/machining/loadinExcel/"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            :show-file-list="false">
          <el-button type="primary" icon="el-icon-upload">上传 Excel</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          prop="argpId"
          label="作物编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sourse"
          label="原料产出基地"
          width="180">
      </el-table-column>
      <el-table-column
          prop="status"
          label="加工状态">
      </el-table-column>
      <el-table-column
          prop="libraryStatus"
          label="库状态">
      </el-table-column>
      <el-table-column
          prop="materialName"
          label="原料厂商负责人">
      </el-table-column>
      <el-table-column
          prop="provinceName"
          label="位置">
        <template v-slot="scope">
          {{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.areaName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="加工日期">
      </el-table-column>
      <el-table-column
          prop="responsibilityName"
          label="负责人姓名">
      </el-table-column>
      <el-table-column
          prop="responsibilityPhone"
          label="负责人电话">
        <template v-slot="scope">
          {{ maskPhoneNumber(scope.row.responsibilityPhone) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="establishTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="establishName"
          label="创建人">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button @click="pushTask" type="text" size="small">查看任务</el-button>
          <el-button @click="machiningDel(scope.row.machiningId)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          <el-button @click="openAdd(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>修改</el-button>
          <el-button @click="openWeather(scope.row.cityName)" type="text" size="small"><i class="el-icon-view"></i>查看天气</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: "MachiningView",
  data() {
    return {
      //默认属性
      title:'添加加工信息',
      value: [],
      options: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      tableData: [],
      formInline:{},
      formLabelWidth:'120px',
      dialogFormVisible:false,
      form:{
        establishTime:this.formatDate(new Date()),
      },
      pageNum:1,
      total:0,
      pageSize:3,
      cityName:'',
      dialogFormVisibleWeather:false,
      temperature: '',
      cityarea: '',
      weatherCondition: '',
      humidity: '',
      // weatherIcon: 'https://img0.baidu.com/it/u=358803579,981614726&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=487', // 根据天气条件动态更改

    }
  }, methods: {
    //自定义方法
    async getWeatherMessage(cityName) {
        const res = await this.axios.get("system/weather/getWeather", { params: { locations: cityName } });
        this.temperature = res.data.temperature;
        this.cityarea = res.data.city;
        this.weatherCondition = res.data.info;
        this.humidity = +res.data.humidity;
    },
    openWeather(cityName) {
      this.humidity = ''
      this.weatherCondition = ''
      this.temperature = ''
      this.dialogFormVisibleWeather = true;
      console.log("城市名称："+cityName)
      this.cityName = cityName;
      this.getWeatherMessage(cityName);


    },
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
      if (!isExcel) {
        this.$message.error('请上传 Excel 文件！');
        return false;
      }
      return true;
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(response+file+fileList)
      this.$message.success('文件上传成功！');
    },
    handleUploadError(error, file, fileList) {
      console.log(error+file+fileList)
      this.$message.error('文件上传失败！');
    },
    excelPort() {
      location.href = "http://192.168.137.44:9017/machining/excelPort";
    },
    maskPhoneNumber(phoneNumber) {
      if (!phoneNumber) return '';
      const middlePart = phoneNumber.slice(3, -4);
      return phoneNumber.replace(middlePart, '****');
    },
    handleChange(value) {
      if (value.length > 0) {
        this.form.provinceId = value[0]
        this.form.cityId = value[1]
        this.form.areaId = value[2]
      }
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.machiningList();
    },
    getOptionTreeList() {
      this.axios.get("system/machining/getOptionsTreeList").then(res => {
          this.options = res.data.data
      });
    },
    machiningDel(machiningId) {
      this.axios.get("system/machining/machiningDel", {params: {id: machiningId}}).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg)
        }
      });
    },
    addMachining() {
      console.log(this.form)
      this.axios.post("system/machining/machiningAdd", this.form).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible = false;
        } else {
          this.$message.error(res.data.msg)
        }
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    pushTask() {
      this.$router.push("machiningtask");
    },
    openAdd(row) {
      console.log(row)
      this.getOptionTreeList();
      this.value = [];
      if (row!=null && row!='') {
        this.title = '修改加工信息';
        this.dialogFormVisible = true;
        this.form = row
        if (row.provinceId) {
          this.value = [row.provinceId+'',row.cityId+'',row.areaId+'']
        }
        console.log(this.value+"aaaaaaaaaaaaaaa")
      } else {
        this.title = '添加加工信息';
        this.dialogFormVisible = true;
        this.form = {
          establishTime: this.formatDate(new Date()),
        };
      }


    },
    machiningList() {
      this.axios.get("system/machining/machiningList",{params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          status:this.formInline.status,
          argpId:this.formInline.argpId
        }}).then(res => {
       this.tableData = res.data.data.list
        this.total = res.data.data.total
        });
    },

  }, created() {//初始化
      this.machiningList();

  }
}
</script>

<style>
.weather-card {
  background-color: #f0f8ff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  line-height: 1.5; /* 设置行高为 1.5 倍字体大小，会增加上下文本的间距 */
}

.weather-info {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.weather-icon {
  width: 100px; /* 图标宽度 */
  height: 100px; /* 图标高度 */
  margin-right: 15px; /* 右边距 */
}

.weather-details h3 {
  font-size: 2em; /* 温度字体大小 */
  margin: 0; /* 去除默认边距 */
}

.weather-details p {
  margin: 5px 0; /* 上下边距 */
  font-size: 1.2em; /* 其他信息字体大小 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 按钮右对齐 */
}
</style>